Karma - Premium Wordpress Theme

User Manual

Thank you very much for your purchase. We built the template with love and care and we hope that it will help you grow your business to new and exciting levels. The following manual will guide you through every aspect of setting up your new website. We're glad that to be of service to you and we look forward to working together in the future. Blessings to you from the US!

If you run into a snag we are always here to help. Please kindly post your support questions on the TrueThemes Support Forums.


Demo Site

Here is a link to the demo site in case you'd like to reference it while building out your website.

Files and Folders

CSS Files:

  • style.css: This is the primary stylsheet that handles the majority of all styling within the template.
  • css/lt8.css: This stylsheet gets served up to IE8 and below.
  • css/pricing-tables.css: This stylsheet handles all of the pricing table styling.


Contact Form Files:

  • contact-form/config.php: This is the contact form configuration file. This is where you will edit the "success" message as well as add email recepients and add & remove fields from the contact form.
  • contact-form/_sample-config-all-field-types.php: This is a sample configuration file. This file includes every single type of form element.
  • contact-form/_sample-contact-form-all-field-types.html: This is a sample contat form that includes every type of form element and would be used in conjuction with the file above.


Miscellaneous Files:

  • content-code-snippets.html: This file holds the 70+ HTML code snippets that can be used to add gorgeous layout elements throughout your website.
  • content-pricing-tables.html: This file holds the HTML code for all of the various pricing tables.
  • js/karma.js: This JavaScript file holds the majority of all Javascript functionality within the template.


Folders:

  • _demo-colors: This folder holds the sample color variations from the demo site.
  • 3dimages: This is where you will store all images for the 3D CU3ER sliders.
  • contact-form: This folder holds all of the AJAX/PHP contact form functionality. You will modify files in this folder when updating the contact form settings.
  • css: This folder holds the CSS for all of the primary and secondary color schemes. It also holds the CSS for the pricing table and IE stylsheet.
  • images: This folder holds all of the images used throughout the template. The "_global" sub-folder holds images used throughout the entire template, and the color-scheme-specific images are organized into their own sub-folders.
  • js: This folder holds all of the JavaScript used throughout the template.
  • swf: This folder holds the SWF and XML files needed for the 3D Slider configuration.

Page Templates

Homepage Templates

  • index-3d-1.html: 3D homepage template with regular height header (preview this page)
  • index-3d-2.html: 3D homepage template with tall header (preview this page)
  • index-jquery-1.html: jQuery homepage template with rounded & colored banner (preview this page)
  • index-jquery-2.html: jQuery homepage template with square style banner (preview this page)
  • index-video-left.html: Video homepage template with left aligned video (preview this page)
  • index-video-right.html: Video homepage template with right aligned video (preview this page)


Content Page Templates

  • template-fullwidth-horizontal-nav.html: Full width page template with horizontal sub-nav (preview this page)
  • template-fullwidth.html: Full width page template with no sub-nav (preview this page)
  • template-leftnav-sidebar.html: Left sub navigation with right sidebar (preview this page)
  • template-leftnav.html: Left sub navigation with no sidebar (preview this page)
  • template-leftsidebar-horizontal-nav.html: Left sidebar with horizontal sub navigation (preview this page)
  • template-leftsidebar.html: Left sidebar with no sub navigation (preview this page)
  • template-rightnav-sidebar.html: Right sub navigation with left sidebar (preview this page)
  • template-rightnav.html: Right sub navigation with no sidebar (preview this page)
  • template-rightsidebar-horizontal-nav.html: Right sidebar with horizontal sub navigation (preview this page)
  • template-rightsidebar.html: Right sidebar with no sub navigation (preview this page)


Gallery Page Templates



Contact Page Templates

  • template-contact-google-map.html: Contact page with google map layout (preview this page)
  • template-contact-iphone.html: Contact page with iPhone sidebar (preview this page)


Blog Page Templates



Utility Page Templates

CSS & Color Schemes

Overview:

  • style.css should always be called first
  • the primary color stylesheet should always be called second
  • if using a unique secondary color, this file should always be called third

CSS Files:

  • style.css: This is the primary stylsheet that handles the majority of all styling within the template.
  • css/lt8.css: This stylsheet gets served up to IE8 and below.
  • css/pricing-tables.css: This stylsheet handles all of the pricing table styling.

Example CSS without unique secondary color:

<link href="style.css" rel="stylesheet" type="text/css" /> <link href="css/karma-teal-grey.css" rel="stylesheet" type="text/css" />

Example CSS with unique secondary color:

<link href="style.css" rel="stylesheet" type="text/css" /> <link href="css/karma-teal-grey.css" rel="stylesheet" type="text/css" /> <link href="css/secondary-cool-blue.css" rel="stylesheet" type="text/css" />

Color Schemes:

Website Navigation

Overview:

  • All navigations are created by forming nested lists
  • To specify an "active page" you simply add a class to the opening list tag (examples below)
  • Navigations can be easily setup by copy/paste from the provided page templates

Active Page Examples:

top-level main navigation item:

<li class="current_page_item"><a href="#"><span>Sample page</span></a></li>

secondary-level main navigation item:

<li class="current-menu-item"><a href="#"><span>Sample page</span></a></li>

sub-navigation item:

<li class="current_page_item"><a href="#"><span>Sample page</span></a></li>

Gallery Pages

Overview:

  • The gallery pages utilize the prettyPhoto lightbox script
  • Each gallery item requires a thumbnail image along with the URL to the item that will be displayed in the lightbox
  • Gallery pages can be easily setup by copy/paste from the provided gallery page templates
  • To display a description within the lightbox simply add a title attribute to the link
  • The lightbox popup can display the following items: image, iframe, youtube, vimeo, swf (Samples of each type can be found on any of the gallery page templates included in your download. Basic samples are also below)

Sample links for lightbox items:

Image: http://www.yourdomain.com/wp-content/uploads/project1.jpg YouTube: http://www.youtube.com/watch?v=VKS08be78os Flash: http://www.yourdomain.com/wp-content/uploads/design.swf?width=792&height=294 Vimeo: http://vimeo.com/8245346 iFrame: http://www.apple.com?iframe=true&width=850&height=500

Contact Form

Contact Form Files:

  • contact-form/config.php: This is the contact form configuration file. This is where you will edit the "success" message as well as add email recepients and add & remove fields from the contact form.
  • contact-form/_sample-config-all-field-types.php: This is a sample configuration file. This file includes every single type of form element.
  • contact-form/_sample-contact-form-all-field-types.html: This is a sample contat form that includes every type of form element and would be used in conjuction with the file above.

Contact Page Templates

  • template-contact-google-map.html: Contact page with google map layout (preview this page)
  • template-contact-iphone.html: Contact page with iPhone sidebar (preview this page)

Adding New Fields:

Adding new fields requires 2 steps:

  1. Add the HTML code to the form
  2. Add the new field to the config.php file

Everything in the config.php file is very straightforward. You simply use the code that's already there to add/remove new fields.

3D Sliders

Overview:

  • The slides/controls/transition effects for each 3D slider are controlled by an XML file.
  • We've included 8 XML files all ready to go for you. You simply modify the XML to point to your new images (image dimensions below).
  • All images used in the 3D sliders should be place inside the 3dimages folder.
  • XML files are well commented and easy to edit. The most basic level of modification is simply swapping out images. You can also add/remove slides and change transition effects.
  • Full documentation for XML options can be found here: CU3ER XML Reference
  • We can certainly help you if you have any questions, but you can also utilize the cu3er support forums.

Image Dimensions:

  • Full Width Slider:
  • Thumbnail Slider:

3D Page Templates:


3D Folders:

  • 3dimages: This is where you will store all images for the 3D CU3ER sliders.
  • swf: This folder holds the SWF and XML files needed for the 3D Slider configuration.

XML Configuration Files:

  • full-width-dark-no-loader.xml: Full width slider with dark colored controls and no middle loader
  • full-width-dark.xml: Full width slider with dark colored controls and includes a middle loader
  • full-width-light-no-loader.xml: Full width slider with light colored controls and no middle loader
  • full-width-light.xml: Full width slider with light colored controls and includes a middle loader
  • thumbnails-dark-no-loader.xml: Thumbnails slider with dark colored controls and no middle loader
  • thumbnails-dark.xml: Thumbnails slider with dark colored controls and includes a middle loader
  • thumbnails-light-no-loader.xml: Thumbnails slider with light colored controls and no middle loader
  • thumbnails-light.xml: Thumbnails slider with light colored controls and includes a middle loader